<template>
	<view class="zsryrz">
		<headertop title="招商人员认证" str1="oridei"></headertop>
		<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11881@2x.png" class="zsryrzback"
			mode="widthFix"></image>
		<view :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}"></view>
		<view class="bottomContent">
			<view class="form">
				<view class="inputline">
					<view class="labtitle" :style="{'color':boolfun()?'#86909C':''}">
						<span style="color: #F53F3F;">*</span>
						<span>姓名：</span>
					</view>
					<input type="text" :disabled="boolfun()" v-model="query['username']" placeholder="请输入姓名" />
				</view>
				<view class="inputline">
					<view class="labtitle" :style="{'color':boolfun()?'#86909C':''}">
						<span style="color: #F53F3F;">*</span>
						<span>性别：</span>
					</view>
					<view class="rightxz" @click="open('性别')">
						<span>{{query['sex']?query['sex']:'请选择'}}</span>
						<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250806134527.png"
							class="bottomarrow" mode="" v-if="!boolfun()"></image>
					</view>
				</view>
				<view class="inputline">
					<view class="labtitle" :style="{'color':boolfun()?'#86909C':''}">
						<span style="color: #F53F3F;">*</span>
						<span>联系方式：</span>
					</view>
					<input type="text" :disabled="boolfun()" v-model="query['telphone']" placeholder="请输入联系方式" />
				</view>
				<view class="inputline">
					<view class="labtitle" :style="{'color':boolfun()?'#86909C':''}">
						<span style="color: #F53F3F;">*</span>
						<span>所属区域：</span>
					</view>
					<view class="rightxz" @click="getdizhi()" style="white-space: nowrap;">
						<span>{{query['province']?`${query['province']}-${query['city']}-${query['area']}`:'请选择区域'}}</span>
						<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250806134527.png"
							class="bottomarrow" mode="" v-if="!boolfun()"></image>
					</view>
				</view>
				<view class="inputline">
					<view class="labtitle" :style="{'color':boolfun()?'#86909C':''}">
						<span>所属项目：</span>
					</view>
					<input type="text" :disabled="boolfun()" v-model="query['project']" placeholder="请输入所属项目" />
				</view>
				<view class="inputline">
					<view class="labtitle" :style="{'color':boolfun()?'#86909C':''}">
						<span style="color: #F53F3F;">*</span>
						<span>招商人员类型：</span>
					</view>
					<view class="rightxz" @click="open('招商人员类型')">
						<span>{{query['usertype']?zhuahua(arr1,query['usertype']):'请选择'}}</span>
						<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250806134527.png"
							class="bottomarrow" mode="" v-if="!boolfun()"></image>
					</view>
				</view>
				<view class="xieyi" v-if="!boolfun()">
					<image
						:src="flag?'https://jingwei.xunfuzhifuzaixian.com/static/images/ttFrame@2x.png':'https://jingwei.xunfuzhifuzaixian.com/static/images/Ellipse 3@2x.png'"
						class="gxk" mode="" @click="flag=!flag"></image>
					<view class="tt">
						阅读并同意<span style="color: #2AB4F5;" @click="gopage1()">《{{title}}》</span>
					</view>
				</view>
				<template v-if="statuslist.length">
					<view class="xieyi" style="margin-top: 30rpx;margin-bottom: 30rpx;"
						v-if="statuslist[0]['status']==2&&statuslist.length">
						<view class="tt" v-if="statuslist[0]['shmsg']">
							<span style="color: #F53F3F;font-size: 24rpx;">拒绝原因：</span>{{statuslist[0]['shmsg']}}
						</view>
					</view>
				</template>

			</view>
		</view>
		<view style="height: 200rpx;">

		</view>
		<view class="fixedbox">
			<view class="btn" @click="gopage()" v-if="statuslist.length"
				:style="{'color':statuslist[0]['status']==0?'#86909C':'','background':statuslist[0]['status']==0?'#F2F3F5':statuslist[0]['status']==1?'#7EBC79':''}">
				{{statuslist[0]['status']==0?'待审核':statuslist[0]['status']==1?'审核成功':'提交认证'}}
			</view>
			<view class="btn" @click="gopage()" v-else>
				提交认证
			</view>
		</view>
		<up-popup :show="show" mode="bottom">
			<view class="xuanxiang">
				<view class="tt" style="margin-left: 30rpx;color: #888;" @click="show=false">
					取消
				</view>

				<view class="tt" style="margin-right: 30rpx;color: #0077BE;" @click="queding">
					确认
				</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" immediate-change="true" :value="zhuanind(arr,query.sex)"
				@change="bindChange" class="picker-view" v-if="titlepopu=='性别'">
				<picker-view-column>
					<view class="item" v-for="(item,index) in arr" :key="index">{{item.name}}</view>
				</picker-view-column>
			</picker-view>
			<picker-view :indicator-style="indicatorStyle" immediate-change="true"
				:value="zhuanind(arr1,query.usertype)" @change="bindChange" class="picker-view"
				v-if="titlepopu=='招商人员类型'">
				<picker-view-column>
					<view class="item" v-for="(item,index) in arr1" :key="index">{{item.name}}</view>
				</picker-view-column>
			</picker-view>
		</up-popup>
		<up-picker :show="show1" :defaultIndex="defaultGroupIndex" ref="uPickerRef" :columns="areaList" keyName="label"
			@cancel="cancel" @confirm="confirm" @change="changeHandler"></up-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
	} from 'vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app";
	import
	city
	from '@/common/area.js'
	import {
		$api
	} from '../../ulm';
	import headertop from '@/components/header.vue'
	const statusBarHeight = ref('')
	const back1 = ref('')
	const indicatorStyle = ref(`height: 50px;`)
	const defaultGroupIndex = ref([])
	const show = ref(false)
	const show1 = ref(false)
	const flag = ref(false)
	const sex = ref('')
	const uPickerRef = ref(null)
	const areaList = ref([city])
	const usertype = ref('')
	const titlepopu = ref('')
	const title = ref('')
	const statuslist = ref([])
	const query = reactive({
		username: '',
		telphone: '',
		sex: '',
		province: '',
		city: '',
		area: '',
		project: '',
		usertype: ''
	})
	const arr = reactive([{
		'name': '男',
		id: '男'
	}, {
		'name': '女',
		id: '女'
	}])
	const arr1 = reactive([{
		'name': '平台招商人员',
		id: 1
	}, {
		'name': '自由招商人员',
		id: 2
	}])
	const barHeight = ref('')
	const changeHandler = (e) => {
		const {
			columnIndex,
			value,
		} = e;
		let city = value[0].children

		if (columnIndex === 0) {
			uPickerRef.value.setColumnValues(1, city);
			uPickerRef.value.setColumnValues(2, city[0].children);
		} else if (columnIndex === 1) { // 市变化更新区/县列表
			uPickerRef.value.setColumnValues(2, value[1].children);
		}
	}
	const cancel = () => {
		show1.value = false;
	}
	onShow(() => {
		initswfile()
		xieyi()
	})
	async function xieyi() {
		const res = await $api.article({
			id: 4
		})
		if (res.code == 1) {
			title.value = res.data.title
		}
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})

	function gopage1() {
		uni.navigateTo({
			url: '/sub_me/index/xieyi?id=' + 4
		})
	}
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#CAEEFF'
		} else {
			back1.value = ''
		}
	})
	const confirm = (e) => {
		let {
			value
		} = e
		query.province = value[0].label //省name
		query.city = value[1].label //市name
		query.area = value[2].label //区name、
		show1.value = false
	}

	function boolfun() {
		if (statuslist.value.length) {
			if (statuslist.value[0]['status'] == 0 || statuslist.value[0]['status'] == 1) {
				return true
			} else {
				return false
			}
		} else {
			return false
		}
	}
	async function initswfile() {
		const res = await $api.swfile()
		if (res.code == 1) {
			statuslist.value = res.data.list
			if (statuslist.value.length) {
				query['username'] = statuslist.value[0]['username']
				query['telphone'] = statuslist.value[0]['telphone']
				query['sex'] = statuslist.value[0]['sex']
				query['province'] = statuslist.value[0]['province']
				query['area'] = statuslist.value[0]['area']
				query['city'] = statuslist.value[0]['city']
				query['project'] = statuslist.value[0]['project']
				query['usertype'] = statuslist.value[0]['usertype']
			}
		}
	}

	function getdizhi() {
		if (boolfun()) return
		areaList.value = [city]
		setTimeout(() => {
			var s = areaList.value[0].findIndex(item => item.label == query.province)
			if (s == -1) {
				s = 0
			}
			var s1 = areaList.value[0][s]['children'].findIndex(item => item.label == query
				.city)
			if (s1 == -1) {
				s1 = 0
			}
			var s2 = areaList.value[0][s]['children'][s1]['children']
				.findIndex(item => item.label == query.area)
			if (s2 == -1) {
				s2 = 0
			}
			defaultGroupIndex.value = [s, s1, s2]
			uPickerRef.value.setColumnValues(1, areaList.value[0][s].children);
			uPickerRef.value.setColumnValues(2, areaList.value[0][s].children[s1].children);
		}, 500)
		show1.value = true
	}

	function zhuahua(arr, id) {
		var ind = arr.findIndex(item => item.id == id)
		return arr[ind]['name']
	}

	function queding() {
		if (titlepopu.value == '性别') {
			if (!sex.value) {
				query['sex'] = arr[0]['id']
			} else {
				query['sex'] = sex.value
			}
		} else if (titlepopu.value == '招商人员类型') {
			if (!usertype.value) {
				query['usertype'] = arr1[0]['id']
			} else {
				query['usertype'] = usertype.value
			}
		}
		show.value = false
	}

	function bindChange(e) {
		const val = e.detail.value
		if (titlepopu.value == '性别') {
			sex.value = arr[val[0]]['id']
		} else if (titlepopu.value == '招商人员类型') {
			usertype.value = arr1[val[0]]['id']
		}
	}

	function zhuanind(arr, ite) {
		var ind = arr.findIndex(item => item['id'] == ite)
		if (ind == -1) {
			ind = 0
		}
		return [ind]
	}

	async function gopage() {
		if (statuslist.value.length) {
			if (statuslist.value[0]['status'] == 0 || statuslist.value[0]['status'] == 1) {
				return
			}
		}
		console.log(query, 'query=================');
		if (!flag.value) {
			uni.showToast({
				title: '请勾选协议',
				icon: 'none'
			})
			return
		}
		for (var i in query) {
			if (i != 'project') {
				if (!query[i]) {
					uni.showToast({
						title: '必填项不能为空',
						icon: 'none'
					})
					return
				}
			}

		}
		const phoneRegex = /^1[3-9]\d{9}$/;
		if (!phoneRegex.test(query['telphone'])) {
			uni.showToast({
				title: '请输入正确联系方式',
				icon: 'none'
			})
			return
		}
		const res = await $api.swadd(query)
		if (res.code == 1) {
			setTimeout(() => {
				uni.showToast({
					icon: 'none',
					title: '您的认证已提交请等待审核~'
				})
			}, 500)
			initswfile()
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}

	}

	function open(str) {
		if (boolfun()) return
		titlepopu.value = str
		show.value = true
	}
</script>

<style lang="scss">
	.picker-view {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.xuanxiang {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		overflow: hidden;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.tt {
			font-size: 32rpx;
		}
	}

	::v-deep .u-popup__content {
		border-radius: 20rpx 20rpx 0 0;
	}

	.zsryrz {
		width: 100%;
		overflow: hidden;
		position: relative;

		.zsryrzback {
			width: 100%;
			position: absolute;
			z-index: -1;
		}

		.fixedbox {
			width: 100%;
			height: 186rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0%;

			.btn {
				width: 686rpx;
				height: 82rpx;
				background: #13A2E6;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 82rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: auto;
				margin-top: 24rpx;
			}
		}

		.bottomContent {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 13rpx 0rpx rgba(157, 219, 255, 0.56);
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			overflow: hidden;
			margin-top: 448rpx;

			.form {
				width: 686rpx;
				margin: auto;
				overflow: hidden;
				margin-top: 32rpx;

				.xieyi {
					width: 100%;
					display: flex;
					align-items: center;

					.gxk {
						width: 32rpx;
						height: 32rpx;
					}

					.tt {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #86909c;
						margin-left: 14rpx;
					}
				}

				.inputline {
					width: 100%;
					height: 92rpx;
					background: #F7F8FA;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 28rpx;

					.labtitle {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #1D2129;
						width: 300rpx;
						white-space: nowrap;
						margin-left: 28rpx;
					}

					.rightxz {
						margin-right: 28rpx;
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #86909C;

						.bottomarrow {
							width: 24rpx;
							height: 24rpx;
							margin-left: 8rpx;
						}
					}

					input {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #86909C;
						text-align: right;
						margin-right: 28rpx;
					}
				}
			}
		}
	}
</style>